<template>
	<!-- 收藏页面（div） -->
	<!-- 赵笛 2023年4月11日 -->
	<view class="parent-box">
		<view class="view-box" style="border-radius: 0;">
			<u-search placeholder="请输入diy名称" v-model="diyName" @search="getDiyCollectionListByUserId()" @custom="getDiyCollectionListByUserId()"></u-search>
		</view>
		<view class="view-box" v-if="diyList.length===0">
			<u-empty
				mode="car"
				icon="http://cdn.uviewui.com/uview/empty/car.png"
				text="暂无收藏"
			>
			</u-empty>
		</view>
		<view class="view-box" v-for="diy in diyList">
			<u-row customStyle="margin-bottom: 10px">
				<u-col span="4">
					<u--image :showLoading="true" 
					:src="'http://101.43.223.224:8765/image/getImageById?id='+diy.diyImageId.split(',')[0]" 
					width="100px"
					height="100px" 
					radius='10'></u--image>
				</u-col>
				<u-col span="8" class="padding-none">
					<div class="text-title">{{diy.diyName}}</div>
					<div class="text-light">{{diy.diyDetails}}</div>
					<div class="text-price">¥{{diy.diyPrice}}</div>
					<div class="text-price" >
						<div style="width:80px;margin-left:10px" class="right">
							<u-button
								style="width:100%"
								type="info"
								shape="circle"
								text="取消收藏"
								size="small"
								:plain="true"
								@click="deleteDiyCollection(diy.id)"></u-button>
						</div>
						<div style="width:80px;" class="right">
							<u-button
								style="width:100%"
								color="#3CCCA6"
								shape="circle"
								text="加入购物车"
								size="small"
								@click="addToShoppingCart(diy.id)"></u-button>
						</div>
					</div>
				</u-col>
			</u-row>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//用户id
				userId:1,
				//diy名称
				diyName:'',
				//diy 列表
				diyList:[],
				//商品列表
				commodityList:[],
				//商品
				itemType:0,
			}
		},
		methods: {
			//查询当前用户收藏的商品
			getDiyCollectionListByUserId(){
				this.$myRequest({
					url: '/handworkDiyCollection/selectHandworkDiyCollectionList',
					data: {
						userId:this.userId,
						diyCommodityName: this.diyName
					}
				}).then(res => {
					if(res.data.flag){
						this.diyList = res.data.data
						console.log(this.diyList)
					}else{
						this.diyList = []
					}
				})
			},
			//加入购物车
			addToShoppingCart(diyId){
				this.diyInfo={
					userId:this.userId,
					//这里其实是diyid
					diyId:diyId,
					businessName:'乐工坊',
					number:1,
					returnAndExchangePolicy:'7天无理由退换',
					//diy
					isNoDiy:1
				}
				//将商品加入购物车
				this.$myRequest({
					url: '/shoppingCart/saveShoppingCart',
					method:'POST',
					data: this.diyInfo
				}).then(res => {
					if(res.data.flag){
						//加入购物车成功
						uni.showToast({
							icon: 'success',
							title: '加入购物车成功',
							// 显示时长时间为3秒
							duration: 3000,
						})
						console.log(res.data.data)
					}else{
						//加入购物车失败
						uni.showToast({
							icon: 'error',
							title: '加入购物车失败',
							// 显示时长时间为3秒
							duration: 3000,
						})
					}
				})
			},
			//取消收藏
			deleteDiyCollection(diyId){
				var handworkDiyCollectionModel = {
					userId:this.userId,
					handworkDiyId:diyId
				}
				this.$myRequest({
					url: '/handworkDiyCollection/deleteByUserIdAndDiyId',
					method:'POST',
					data: handworkDiyCollectionModel
				}).then(res => {
					if(res.data.flag){
						//已取消收藏
						uni.showToast({
							icon: 'success',
							title: '已取消收藏',
							// 显示时长时间为3秒
							duration: 3000,
						})
						this.getDiyCollectionListByUserId()
					}else{
						//取消失败
						uni.showToast({
							icon: 'warning',
							title: '取消失败',
							// 显示时长时间为3秒
							duration: 3000,
						})
						this.getDiyCollectionListByUserId()
					}
				})
			},
		},
		onLoad() {
			this.userId = wx.getStorageSync('user').id
			this.getDiyCollectionListByUserId()
		}
	}
</script>

<style>
/**
	 * 公共样式 ↓
	 */
	.parent-box{
		height:100%;
		background-color: #f5f5f5;
	}
	.left{
		float:left;
	}
	.right{
		float:right;
	}
	.text-title {
		//文字标题样式
		font-size: 14px;
		color: #333333;
		font-weight: bold;
	}

	.text-dark {
		//深色文字样式
		font-size: 12px;
		color: #666666;
	}

	.text-light {
		//浅色文字样式
		font-size: 12px;
		color: #999999;
	}
	.text-price{
		font-size: 18px;
		color: #E06181;
		font-weight: bold;
	}
	.text-center {
		//居中文字样式
		text-align: center;
	}
	.view-box {
		margin:0 10px ;
		border-radius: 10px;
		line-height: 24px;
		background: #fff;
		padding: 16px 10px;
		margin-bottom: 6px;
	}
	.padding-none{
		padding:0
	}
	

	/**
	 * 公共样式 ↑
	 */
</style>
